<template>
  <view class="page">
    <u-sticky bgColor="#fff">
      <Tabs
        :list="tabList"
        @click="handleTab"
        :current="current"
        :scrollable="false"
        lineWidth="50"
      />
    </u-sticky>
    <Coupon v-for="(i, k) in dataList" :key="k" :datas="i" @click="handleClick" />
    <u-loadmore :status="status" />
  </view>
</template>

<script>
import Tabs from "@/components/Tabs/index";
import Coupon from "@/pages/my/cp/Coupon";

import { myCouponList } from "@/request/myApi.js";
export default {
  components: { Tabs, Coupon },
  data() {
    return {
      current: 0,
      tabList: [
        { name: "可使用", value: 1 },
        { name: "已使用", value: 2 },
        { name: "已过期", value: 3 },
      ],
      dataList: [], // 卡券列表
      status: "loadmore", // 加载状态
      total: 0, // 总数
      page: 1, // 页数
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    // 切换选项卡
    handleTab(v) {
      this.current = v.index;
      this.page = 1;
      this.dataList = [];
      this.total = 0;
      uni.pageScrollTo(); // 滚动到顶部
      this.getDataList();
    },
    // 去使用
    handleClick(val) {
      uni.switchTab({ url: '/pages/tabBar/homeIndex' })
    },
  onReachBottom() {
    if (this.total <= this.dataList.length) return;
    this.page++;
    this.getDataList();
  },
    // 获取数据列表
    getDataList() {
      let data = {
        state: this.tabList[this.current].value,
        page: this.page,
      };
      this.status = "loading";
      myCouponList(data)
        .then((res) => {
          if (res.code == 1) {
            let list = res.data.data;
            this.dataList = this.page == 1 ? list : this.dataList.concat(list);
            this.total = res.data.total;
          }
        })
        .finally(() => {
          this.status = this.total > this.dataList.length ? "loadmore" : "nomore";
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx;
}
</style>
